<template>
	<view class="information">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>消息中心</custom-navi>
		<view class="information-box">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData">
				<view class="kong" v-if="contentList.length === 0"><image src="/static/richTxt/kong2.png" mode=""></image><view class="">暂无数据</view></view>
				<view class="list" v-for="(item,index) in contentList" :key="index">
					<view class="list-time">2019年07月22号 14:52:21</view>
					<view class="list-txt">
						<view class="title">
							<view class="left">合伙人套餐提成</view>
							<view class="right">12:45</view>
						</view>
						<view class="content">收入88.03元</view>
						<view class="img">
							<image src="" mode=""></image>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	import sPullScroll from '@/src/pages/components/s-pull-scroll/index.vue';
	export default {
		components: { sPullScroll },
		data(){
			return{
				page:'',
				size:'',
				contentList:[
					{title:'1'}
				]
			}
		},
		onLoad() {
			
		},
		methods:{
			//****************************************************
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					if (pullScroll.page == 1) {
						this.page =1
						this.size=10
						// this.listFrom()
					}else{
						if(this.size>this.total){
							pullScroll.empty()
						}else{
							// this.page=this.page+1
							this.size=this.size+10
							// this.listPush()
							// this.listFrom()
						}
					}
					
					pullScroll.success();
				}, 1000);
			},
			//**********************************************************
		}
	}
</script>

<style lang="scss">
	.information{
		width:100%;
		height:100vh;
		background:rgba(241,241,241,1);
		opacity:1;
		&-box{
			position: relative;
			height: 77%;
			// margin-top: 20rpx;
			.list{
				width:686rpx;
				height:490rpx;
				// background:rgba(255,255,255,1);
				opacity:1;
				// border-radius:20px;
				margin: auto;
				margin-top: 32rpx;
				&-time{
					width:300rpx;
					height:32rpx;
					background:rgba(221,221,221,1);
					opacity:1;
					border-radius:6rpx;
					margin: auto;
					font-size:22rpx;
					font-family:PingFang SC;
					font-weight:400;
					line-height:32rpx;
					color:rgba(255,255,255,1);
					text-align: center;
					margin-bottom: 34rpx;
				}
				&-txt{
					width:686rpx;
					// height:428rpx;
					background:rgba(255,255,255,1);
					opacity:1;
					border-radius:20rpx;
					padding: 30rpx;
					.title{
						display: flex;
						margin-bottom: 18rpx;
						.left{
							font-size:34rpx;
							font-family:PingFang SC;
							font-weight:400;
							
							color:rgba(3,3,3,1);
							opacity:1;
						}
						.right{
							margin-left: auto;
							font-size:24rpx;
							font-family:PingFang SC;
							font-weight:400;
							color:rgba(149,151,166,1);
							opacity:1;
						}
					}
					.content{
						font-size:28rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(112,112,112,1);
						opacity:1;
					}
					.img{
						width:622rpx;
						height:260rpx;
						background:rgba(221,221,221,1);
						opacity:1;
						border-radius:10rpx;
						margin: auto;
						margin-top: 22rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.kong{
				// width: 400rpx;
				// height: 400rpx;
				width: 100%;
				height: 100%;
				margin: auto;
				image{
					// width: 100%;
					// height: 100%;
					width: 400rpx;
					height: 400rpx;
					margin-top: 200rpx;
				}
				text-align: center;
				font-size:32rpx;
				font-family:Source Han Sans CN;
				font-weight:400;
				color:rgba(69,69,69,1);
				opacity:1;
			}
		}
	}
</style>
